<template>
	<view class="bg">
		<x-scroll :fixed="true" isNav @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="_freshing">
			<view class="wap">
				<view class="user_info">
					<view class="cover" @click="previewImage(user.UserImgs)">
						<image :src="user.HeadImgUrl" mode="aspectFill" />
					</view>
					<view class="info">
						<view class="name">
							<view class="f1 c1 f1 c1 name_text u-line-1">{{user.Name}}</view>

						</view>

					</view>
				</view>

			</view>
			<view class="nav_list">
				<!-- <view class="nav_item" @click="nav_to('/pages/manage/cirReview')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">圈子审核</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item" @click="nav_to('/pages/manage/actReview')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">活动审核</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item" @click="nav_to('/pages/manage/users_tab')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">用户标签审核</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view> -->
				<view class="nav_item" @click="nav_to('/pages/manage/new_users')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">新用户数据</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item" @click="nav_to('/pages/manage/new_rg_users')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">注册用户数据</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item" @click="nav_to('/pages/manage/day_act_members')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">日活跃用户</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item" @click="nav_to('/pages/manage/month_act_members')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">月活跃用户</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item" v-if="role.AppAdmin==1"  @click="nav_to('/pages/manage/consumption')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">用户消费数据</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item" @click="nav_to('/pages/manage/members')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">会员列表</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				
				
				<view class="nav_item"  @click="nav_to('/pages/manage/userbehavior')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">会员行为数据</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item"  @click="nav_to('/pages/manage/userorder')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">未付款数据</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item" @click="nav_to('/pages/manage/usercityreport')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">会员城市分布</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="nav_item" @click="nav_to('/pages/manage/channelreport')">
					<view class="nav_item_icon">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
					<view class="f2 c1 con">会员来源分布</view>
					<view class="arr_r">
						<uni-icons color="#333" type="right" size="18"></uni-icons>
					</view>
				</view>
				
			</view>
		</x-scroll>
	</view>
</template>

<script>
	export default {
		tabTop: 0,
		components: {
		},
		data() {
			return {

				isModal: false,
				
				user: {},
				photosurl: [],
				role:{}
			}
		},
		computed: {


		},
		methods: {
			//下拉刷新
			async onRefresh() {

			},
			//滚动到底部触发
			async scrolltolower() {

			},


			async init() {
				
				
				let res = await this.$api.post('Company/GetCompanyRole');
				
				console.log('role ==='+JSON.stringify(res.data));
				
				if(res.data){
					this.role=res.data;
				}
			},

			async getUserInfo() {
	
				let res = await this.$api.post('User/GetUserInfo', {
					ID: this.user.ID
				});
				
				this.user=res.data;
			},
		},

		onLoad() {
			
			this.user=uni.getStorageSync('user');
			
			console.log(JSON.stringify(this.user));
			
			this.getUserInfo();
			
			this.init();
			
		},
		onReady() {

		},
		onShow() {
			
		},
	}
</script>

<style lang="scss">
page{
	view{
		color: #333 !important;
	}
}
	button {
		text-align: left !important;
		color: #fff !important;
		background-color: transparent !important;
		height: 40rpx;
		display: flex;
		align-items: center;
	}

	button::after {
		border-radius: 0 !important;
		border: 0 !important;
	}

	.f2 {
		font-size: 34rpx;
	}

	.f1 {
		font-size: 34rpx;
	}

	.my {}

	.user_info {
		padding-top: 44rpx;
		display: flex;

		.cover {
			flex-shrink: 0;
			height: 160rpx;
			width: 160rpx;
			border: 1px solid #979797;
			border-radius: 50%;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.name {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;

			.name_text {
				// width: 100%;
				max-width: 180rpx;
			}

			.real {
				flex-shrink: 0;
				display: flex;
				margin-left: 16rpx;
				font-size: 26rpx;
				align-items: center;

				image {
					height: 40rpx;
					width: 32rpx;
					margin-right: 8rpx;
				}
			}
		}

		.gonum {
			line-height: 34rpx;

			.c3 {
				padding-right: 20rpx;
			}
		}

		.info {
			padding-left: 38rpx;
			flex: 1;
			display: flex;
			align-items: center;
		}

		.flax {
			display: flex;
			width: 100%;

			.left {
				flex: 1;
			}

			.btn_edit {
				flex-shrink: 0;
				width: 160rpx;
				height: 64rpx;
				border-radius: 32px;
				border: 2px solid rgba(253, 249, 246, 0.4);
				font-size: 28rpx;
				text-align: center;
				line-height: 64rpx;
			}
		}

		.number {
			height: 64rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
		}
	}

	.info_editor {
		display: flex;
		align-items: center;
	}

	.setting_btn {
		flex-shrink: 0;
		width: 152rpx;
		height: 54rpx;
		border-radius: 32px;
		border: 2px solid rgba(253, 249, 246, 0.4);
		font-size: 28rpx;
		text-align: center;
		line-height: 54rpx;
		flex: 1;
		margin: 12rpx 0;
	}

	.member1 {
		position: relative;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 24rpx;
		background: linear-gradient(180deg, #FDF9F6 0%, #E1C4A6 100%);
		color: #4C310C;
		padding-left: 40rpx;
		padding-right: 12rpx;
		margin-left: 44rpx;

		&::before {

			position: absolute;
			top: -22rpx;
			left: -28rpx;
			height: 64rpx;
			width: 64rpx;
			content: "";
			background: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17103822832081089.png') no-repeat center center;
			background-size: 64rpx 64rpx;
		}
	}

	.member2 {
		position: relative;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 24rpx;
		background: linear-gradient(180deg, #3D3D3D 0%, #636363 100%);
		color: #E5E7EA;
		padding-left: 40rpx;
		padding-right: 12rpx;
		margin-left: 44rpx;

		&::before {

			position: absolute;
			top: -22rpx;
			left: -28rpx;
			height: 64rpx;
			width: 64rpx;
			content: "";
			background: url("https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710382378135992.png") no-repeat center center;
			background-size: 64rpx 64rpx;
		}
	}


	.member3 {
		position: relative;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 24rpx;
		background: linear-gradient(180deg, #3D3D3D 0%, #636363 100%);
		color: #E5E7EA;
		padding-left: 40rpx;
		padding-right: 12rpx;
		margin-left: 44rpx;

		&::before {

			position: absolute;
			top: -22rpx;
			left: -28rpx;
			height: 64rpx;
			width: 64rpx;
			content: "";
			background: url("https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710382378135992.png") no-repeat center center;
			background-size: 64rpx 64rpx;
		}
	}

	.brief {
		margin-top: 40rpx;
		margin-bottom: 30rpx;
		line-height: 1.8;
	}

	.lin1 {
		display: flex;
		align-items: center;

		.lin1_item {
			flex: 1;

			.num {
				font-size: 48rpx;
			}

			.num,
			.lab {
				text-align: center;
			}

			.num {
				position: relative;
			}

			.numVal {
				position: absolute;
				top: -10rpx;
				right: 45rpx;
				height: 40rpx;
				width: 40rpx;
				border-radius: 50%;
				background: #f00;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				color: #fff;
			}
		}
	}

	.nav_list {
		padding-bottom: 120rpx;
		margin-top: 30rpx;

		.nav_item {
			margin-left: 54rpx;
			margin-right: 54rpx;
			margin-top: 52 - 22rpx;
			padding-top: 16rpx;
			padding-bottom: 22rpx;
			display: flex;
			align-items: center;
			position: relative;

			&::after {
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
				height: 2rpx;
				content: '';
				transform: scaleY(.6);
				background-color: #404040;
			}

			&.number:after {
				height: 0
			}

			.con {
				flex: 1;
				padding-left: 12rpx;

				.super_member {
					position: absolute;
					top: 0rpx;
					right: 304rpx;
					color: black;
					background: linear-gradient(135deg, #fd9604 0%, #dc3518 100%);
					padding: 3rpx 10rpx;
					border-radius: 12rpx;
					font-size: 20rpx;
					line-height: 28rpx;
				}
			}

			.icon {
				height: 40rpx;
				width: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			.nav_item_icon {
				height: 48rpx;
				width: 48rpx;

				image {
					height: 48rpx;
					width: 48rpx;
				}
			}
		}

		.number {
			background: linear-gradient(90deg, #212121 0%, #313131 100%);
			box-shadow: 0px 6rpx 16rpx 0px rgba(0, 0, 0, 0.5);
			border-radius: 8rpx;
			border: 2rpx solid #4A4A4A;
			margin-left: 32rpx;
			margin-right: 32rpx;
			padding-left: 24rpx;
			padding-right: 24rpx;
		}
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.nav {
		height: 44px;

		.nav_left {
			// margin-top: 7px;
			height: 44px;
			line-height: 30px;
			font-size: 28rpx;
			color: #fff;
			width: 200rpx;
			display: flex;
			align-items: center;
			float: left;

			text {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #fff;
			}


		}

		.nav_right {
			// margin-top: 7px;
			height: 44px;
			line-height: 30px;
			font-size: 28rpx;
			color: #fff;
			width: 200rpx;
			display: flex;
			align-items: center;
			float: left;

			// justify-content: center;
			text {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #fff;
				// font-weight: bold;
			}
		}
	}

	.canvas {
		overflow: hidden;
		position: relative;

		.canvasposition {
			position: absolute;
			left: 4000rpx;
			top: 0;
		}
	}

	.painting {
		.swiper {
			width: 750rpx;
			height: 1334rpx;
			padding-top: 20rpx;
			text-align: center;

			image {
				margin: 40px 20px 0 20px;
			}

			.keep {
				width: 70%;
				height: 60rpx;
				background: #ffc371;
				color: #ffffff;
				border-radius: 20rpx;
				font-size: 28rpx;
				line-height: 60rpx;
				margin: 0 auto;
				text-align: center;
			}

			.tips {
				line-height: 120rpx;
			}
		}
	}
</style>